<template>
  <!-- 会员模块的基本信息管理 -->
  <div class="father-members">
    <!-- 查询页面 -->
    <div>
      <!-- 查询条件 -->
      <el-form
        ref="orderquery"
        :model="selectData"
        size="mini"
        class="orderquery"
      >
        <div style="display: flex; margin: 0 0 10px 0">
          <el-form-item label="券名称" style="display: flex; margin: 0 30px 0 0">
            <el-input v-model="selectData.couponName"></el-input>
          </el-form-item>
          <!-- <el-form-item label="描述" style="display: flex; margin: 0 30px 0 0">
            <el-input v-model="selectData.couponDescription"></el-input>
          </el-form-item> -->
          <!-- <el-form-item label="生效日期" style="display: flex; margin: 0 30px 0 0">
            <el-date-picker v-model="seleData" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="失效日期" style="display: flex; margin: 0 30px 0 0">
            <el-date-picker v-model="failureData" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item> -->
        </div>
        <div style="display: flex; margin: 30px 0 10px 0">
          <el-form-item
            label="优惠券状态"
            style="display: flex; margin: 0 30px 0 0"
          >
            <el-radio
              v-model="selectData.couponStatus"
              label="yes"
              @change="couponStatusMEthod"
              >上架</el-radio
            >
            <el-radio
              v-model="selectData.couponStatus"
              label="no"
              @change="couponStatusMEthod"
              >下架</el-radio
            >
          </el-form-item>
          <el-button
            style="margin: 0px 10px 10px 30px"
            size="mini"
            type="primary"
            @click="immediatelyquery"
            >立即查询
          </el-button>
          <el-button
            style="width: 80px; margin: 0px 0px 10px 30px"
            size="mini"
            type="primary"
            @click="imediateadd"
            >添加
          </el-button>
        </div>
      </el-form>
      <!-- 表格  -->
      <div class="container-table">
        <el-table
          :data="tableData"
          class="account_table"
          size="small"
          border
          :header-cell-style="{
            color: '#fff',
            background: '#6090EC',
            fontSize: '11px',
            fontWeight: 'normal',
          }"
        >
          <el-table-column fixed prop="id" label="券编号" align="cneter">
          </el-table-column>
          <el-table-column fixed prop="couponName" label="券名称">
          </el-table-column>
          <el-table-column prop="couponAmount" label="优惠卷金额">
          </el-table-column>
          <el-table-column prop="fullSubMinAmount" label="优惠卷满减最小金额">
          </el-table-column>
          <el-table-column prop="discountValue" label="折扣值">
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间">
          </el-table-column>
          <el-table-column prop="couponLimitedDay" label="有效期">
          </el-table-column>
          <el-table-column prop="couponUseScope" label="适用范围">
          </el-table-column>
          <el-table-column prop="couponType" label="券类型">
            <template slot-scope="scope">
              <template v-if="scope.row.couponType == 'generation'"
                >代金</template
              >
              <template v-if="scope.row.couponType == 'discount'"
                >折扣</template
              >
              <template v-if="scope.row.couponType == 'subtraction'"
                >满减</template
              >
            </template>
          </el-table-column>
          <el-table-column prop="couponType" label="券类型">
            <template slot-scope="scope">
              <template v-if="scope.row.couponStatus == 'yes'">上架</template>
              <template v-if="scope.row.couponStatus == 'no'">下架</template>
            </template>
          </el-table-column>
          <el-table-column prop="createName" label="操作人"> </el-table-column>
          <el-table-column label="操作" width="260">
            <template slot-scope="scope">
              <el-button
                type="primary"
                @click="handeredit(scope.row)"
                size="mini"
                >修改</el-button
              >
              <el-button
                type="primary"
                @click="handerdel(scope.row)"
                size="mini"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 新增 -->
    <el-dialog
      title="新增优惠券"
      :visible.sync="addshowdialog"
      :close-on-click-modal="false"
      width="50%"
    >
      <el-form
        size="mini"
        :data="addForm"
        :model="addForm"
        status-icon
        ref="addForm"
         :rules="addFormrules"
        label-width="150px"
        class="demo-ruleForm"
      >
        <div class="formdiv">
          <el-form-item label="优惠卷名称" prop="couponName">
            <el-input v-model="addForm.couponName"></el-input>
          </el-form-item>
          <el-form-item label="优惠卷描述" prop="couponDescription">
            <el-input v-model="addForm.couponDescription"></el-input>
          </el-form-item>
        </div>
        <div class="formdiv">
          <el-form-item label="优惠卷有效时长(天)" prop="couponLimitedDay">
            <el-input v-model="addForm.couponLimitedDay"></el-input>
          </el-form-item>
          <el-form-item label="优惠卷状态" prop="couponStatus">
            <el-radio v-model="addForm.couponStatus" label="yes">上架</el-radio>
            <el-radio v-model="addForm.couponStatus" label="no">下架</el-radio>
          </el-form-item>
        </div>
        <div class="formdiv">
          <el-form-item label="优惠卷类型" prop="couponType">
            <el-radio v-model="addForm.couponType" label="generation"
              >代金</el-radio
            >
            <el-radio v-model="addForm.couponType" label="discount"
              >折扣</el-radio
            >
            <el-radio v-model="addForm.couponType" label="subtraction"
              >满减</el-radio
            >
          </el-form-item>
         
        </div>
        <div class="formdiv">
          <el-form-item
            v-if="addForm.couponType == 'subtraction'"
            label="满"
            prop="fullSubMinAmount"
          >
            <el-input min="0" v-model="addForm.fullSubMinAmount"></el-input>
          </el-form-item>
          <el-form-item
            v-if="addForm.couponType == 'generation'||addForm.couponType == 'subtraction'"
            label="减"
            prop="couponAmount"
          >
            <el-input v-model="addForm.couponAmount"></el-input>
          </el-form-item>
          <el-form-item
            v-if="addForm.couponType == 'discount'"
            label="优惠卷折扣值"
            prop="discountValue"
          >
            <el-input v-model.number="addForm.discountValue" placeholder="输入90，为9折"></el-input>
          </el-form-item>
        </div>
 
        <div class="formdiv">
          <el-form-item label="优惠卷使用范围" prop="listaa">
            <el-checkbox-group @change="couponUseScopemethod" v-model="addForm.listaa">
              <el-checkbox label="机票"></el-checkbox>
              <el-checkbox label="火车票"></el-checkbox>
              <el-checkbox label="酒店"></el-checkbox>
              <el-checkbox label="贵宾厅"></el-checkbox>
              <el-checkbox label="vip通道"></el-checkbox>
              <el-checkbox label="会员卡"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </div>

        <el-form-item>
          <el-button
            size="mini"
            type="primary"
            @click="getadd('addForm')"
            style="
              width: 110px;
              font-size: 10px;
              color: #fff;
              height: 30px;
              background-color: #f6b23e;
            "
            >确定</el-button
          >
          <el-button
            size="mini"
            type="primary"
            @click="addshowdialog = false"
            style="width: 110px; font-size: 10px"
            >取消</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="delDialogVisible" width="30%" center>
      <span>确认删除吗</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="delCouponType">确 定</el-button>
      </span>
    </el-dialog>
    <!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"  
      :page-sizes="[10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="pageTotal">
    </el-pagination> -->
  </div>
</template>
<script>
const cityOptions = [
  "会员",
  "机票",
  "酒店",
  "贵宾厅",
  "火车票",
  "旅游",
  "健康",
  "商城",
  "专车",
];

const serve = [
  "挂号服务体验劵",
  "挂号服务无限劵",
  "在线问诊无限劵",
  "健康体检体验券",
  "私人医生无限券",
  "航班延误体验券",
  "航班取消体验券",
  "贵宾厅体验券",
  "贵宾厅无限券",
  "景区门票体验券",
  "DD代驾领取券",
];
export default {
  name: "coupon",
  data() {
    return {
      listaa: [],
      delDialogVisible: false,
      selectData: {
        couponName: "",
        couponDescription: "",
        couponStatus: "yes",
      },
      addForm: {
        listaa: [],
        couponLimitedDay: "365",
        couponName: "",
        couponDescription: "",
        couponStatus: "yes",
        couponType: "generation",
        fullSubMinAmount: "",
        couponAmount: "",
        couponUseScope: "",
        
      },
      addFormrules:{
          couponName: [
            { required: true, message: '请输入', trigger: 'blur' },
          ],
           couponDescription: [
            { required: true, message: '请输入', trigger: 'blur' },
          ],
             couponLimitedDay: [
            { required: true, message: '请输入', trigger: 'blur' },
          ],
            fullSubMinAmount: [
            { required: true, message: '请输入', trigger: 'blur' },
          ],
            discountValue: [
            { required: true, message: '请输入', trigger: 'blur' },
          ],  couponAmount: [
            { required: true, message: '请输入', trigger: 'blur' },
          ],
           couponStatus: [
            { required: true, message: '请选择', trigger: 'change' },
          ],
           couponType: [
            { required: true, message: '请选择', trigger: 'change' },
          ],
           listaa: [
              { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          ],
          
          
          
          
          },
pageTotal:"",
      addshowdialog: false,
      etidid: "",
      delid: "",

      vouchers: true, //控制盒子的显示隐藏
      orderquery: null,
      tableData: [],

      seleData: new Date(new Date() - (3600 * 1000 * 24 * 7 + 1000))
        .toLocaleDateString()
        .replace(/\//g, "-"), //时间日期
      failureData: new Date(new Date().getTime() + 86400000)
        .toLocaleDateString()
        .replace(/\//g, "-"), //失效日期
      radio: "1", //优惠券状态
    };
  },
  methods: {
    handleSizeChange(val){

    },
     handleCurrentChange(val){

    },
    // 保存按钮
    imediateupp() {
      this.vouchers = !this.vouchers; //取反
    },
    // 添加
    imediateadd() {
      this.addForm = {};
      this.addForm.listaa = [];
      this.etidid = "";
      this.addshowdialog = true;
    },
    getadd(formName) {
      if (this.addForm.listaa.length!=0) {
         this.$refs[formName].validate((valid) => {
          if (valid) {
                if (this.etidid == "") {
            this.getaddCouponType();
          } else {
            this.getupdCouponType();
          }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }else{
        this.$message({
              message: "请选择适用范围",
              type: "warning",
            });
      }
       
     
    },
    getaddCouponType() {
      this.$axios
        .getaddCouponType({
          couponName: this.addForm.couponName,
          couponDescription: this.addForm.couponDescription,
          couponLimitedDay: this.addForm.couponLimitedDay,
          couponStatus: this.addForm.couponStatus,
          couponType: this.addForm.couponType,
          fullSubMinAmount: this.addForm.fullSubMinAmount,
          couponAmount: this.addForm.couponAmount,
          discountValue: this.addForm.discountValue,
          couponUseScope: this.addForm.couponUseScope,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.addshowdialog = false;

            this.immediatelyquery();
            this.$message({
              message: "成功",
              type: "success",
            });
            this.addForm = {};
          }
        });
    },
    getupdCouponType() {
      this.$axios
        .getupdCouponType({
          id: this.etidid,
          couponName: this.addForm.couponName,
          couponDescription: this.addForm.couponDescription,
          couponLimitedDay: this.addForm.couponLimitedDay,
          couponStatus: this.addForm.couponStatus,
          couponType: this.addForm.couponType,
          fullSubMinAmount: this.addForm.fullSubMinAmount,
          couponAmount: this.addForm.couponAmount,
          discountValue: this.addForm.discountValue,
          couponUseScope: this.addForm.couponUseScope,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.addshowdialog = false;
            this.etidid = "";
            this.immediatelyquery();
            this.$message({
              message: "成功",
              type: "success",
            });
            this.addForm = {};
          }
        });
    },
    couponUseScopemethod(val) {
      
      this.$forceUpdate()
      this.addForm.couponUseScope = val.join(",");
      console.log(this.addForm.couponUseScope);
    },

    // 查询
    immediatelyquery() {
      this.getCouponTypeList();
    },
    couponStatusMEthod() {
      this.immediatelyquery();
    },
    //查列表
    getCouponTypeList() {
      this.$axios
        .getCouponTypeList({
     
          couponName: this.selectData.couponName,
          couponDescription: this.selectData.couponDescription,
          couponStatus: this.selectData.couponStatus,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.tableData = res.data;
          }
        });
    },

    handerdel(row) {
      this.delid = row.id;
      this.delDialogVisible = true;
    },
    delCouponType() {
      this.$axios
        .delCouponType({
          id: String(this.delid),
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.delDialogVisible = false;
            this.$message({
              message: "成功",
              type: "success",
            });
            this.immediatelyquery();
          }
        });
    },

    // 修改   编辑
    handeredit(row) {
      console.log(row);
      this.etidid = row.id;
      this.$axios
        .getCouponTypeInfo({
          id: String(this.etidid),
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.addshowdialog = true;
            (this.addForm.couponName = res.data.couponName),
              (this.addForm.couponDescription = res.data.couponDescription),
              (this.addForm.couponStatus = res.data.couponStatus),
              (this.addForm.couponType = res.data.couponType),
              (this.addForm.fullSubMinAmount = res.data.fullSubMinAmount),
              (this.addForm.couponAmount = res.data.couponAmount),
              (this.addForm.couponLimitedDay = res.data.couponLimitedDay),
              (this.addForm.couponUseScope = res.data.couponUseScope);
            this.addForm.discountValue = res.data.discountValue;
            this.addForm.listaa = res.data.couponUseScope.split(",");
            console.log(this.addForm.listaa);
          }
        });
    },
  },
  mounted() {
    this.immediatelyquery();
  },
};
</script>

<style scoped>
#descriptions {
  border: 1px solid red;
}

.orderquery {
  margin: 20px;
}

.business-p {
  display: inline-flex;
  width: 100%;
  height: 50px;
}

.business-p span {
  line-height: 50px;
}

.business-ul {
  display: flex;
  margin-left: 15px;
}

.business-ul li {
  height: 50px;
  background-color: #5fb878;
  padding: 20px;
  box-sizing: border-box;
  margin-right: 15px;
  color: #fff;
  text-align: center;
}

.coupons {
  margin-top: 20px;
}

.Fullreduction {
  margin-top: 20px;
}

.last-serve {
  margin-top: 20px;
  line-height: 50px;
}

.container-table {
  width: 95%;
  margin: 20px;
}
.formdiv {
  display: flex;
}
</style>